<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12-简单版发布留言案例</title>
  <style>
    .box {
      width: 500px;
      margin: 100px auto;
    }

    li {
      list-style: none;
    }

    ul li {
      margin-top: 20px;
      margin-left: -40px;
      background-color: skyblue;
    }

    ul li a {
      float: right;
    }
  </style>
</head>

<body>
  <div class="box">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>

    <ul>
      <!-- <li>默认评论</li> -->
    </ul>
    <script>
      // 1. 获取元素
      var btn = document.querySelector('button');
      var text = document.querySelector('textarea');
      var ul = document.querySelector('ul');

      // 2. 注册事件
      btn.onclick = function () {
        if (text.value === '') {
          alert('请输入评论内容');
          return false;
        } else {
          // (1) 创建元素
          var li = document.createElement('li');
          // javascript:; 阻止链接跳转
          li.innerHTML = text.value + '<a href="javascipt:;">删除</a>';
          // (2) 添加元素
          ul.insertBefore(li, ul.children[0]);
          text.value = '';

          // (3) 删除元素：删除的就是当前链接的li 也就是它父亲
          var as = document.querySelectorAll('a');
          for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
              // node.removeChild(child); 删除的是li 当前a所在的li
              ul.removeChild(this.parentNode);
            }
          }
        }
      }


    </script>
  </div>
</body>

</html>